<template>
<div class="music-list">
  <div class="icon" @click="goBack">
    <i class="icon-back"></i>
  </div>
  <h1 v-html="title" class="title"></h1>
  <div class="bg-image" :style="bgStyle" ref="bgImg">
    <div class="play-wrapper">

    </div>
    <div class="filter"></div>
  </div>
  <scroll class="list" @scroll="scroll" :listenScroll="listenScroll" :probeType="probeType" ref="list">
    <div class="song-list-wrapper">
      <song-list :songs="songs"></song-list>
    </div>
  </scroll>
</div>
</template>

<script>
  import Scroll from 'base/scroll/scroll'
  import SongList from 'base/song-list/song-list'

  const RESERVED_HEIGHT = 40

  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      bgImg: {
        String,
        default: 'http://p.qpic.cn/music_cover/Mbno07sCmbib3CRFCbPMU6T32ppxB8hoibuh4cAjpd8kibbqeXhzdiauicg/600?n=1'
      },
      songs: {
        Array,
        default: []
      }
    },
    data () {
      return {
        probeType: 3,
        listenScroll: true,
        scrollY: 0
      }
    },
    computed: {
      bgStyle () {
        return `background-image:url(${this.bgImg})`
      }
    },
    watch: {
      scrollY (newVal) {
        let rest = this.imageHeight + newVal
        let percent = 1
        if (newVal > 0) {
          percent = percent + Math.abs(newVal / this.imageHeight)
          this.$refs.bgImg.style.transform = `scale(${percent},${percent})`
        }

        if (rest < RESERVED_HEIGHT) {
          this.$refs.bgImg.style.height = `${RESERVED_HEIGHT}px`
          this.$refs.bgImg.style.zIndex = 10
          this.$refs.bgImg.style.paddingTop = 0
        } else {
          this.$refs.bgImg.style.height = 0
          this.$refs.bgImg.style.zIndex = 0
          this.$refs.bgImg.style.paddingTop = '70%'
        }
      }
    },
    methods: {
      goBack () {
        this.$router.back()
      },
      scroll (pos) {
        this.scrollY = pos.y
      }
    },
    mounted () {
      this.imageHeight = this.$refs.bgImg.clientHeight
      this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT
      this.$refs.list.$el.style.top = `${this.imageHeight}px`
    },
    components: {
      Scroll,
      SongList
    }
  }
</script>

<style scoped lang="stylus">
  @import '~common/stylus/variable.styl'
  @import '~common/stylus/mixin.styl'
  .music-list
    position fixed
    top 0
    right 0
    left 0
    bottom 0
    background $color-background
    .icon
      position absolute
      top 5px
      left 0
      color $color-theme
      font-size $font-size-large
      padding 5px
      z-index 50
    .title
      position absolute
      top 0
      left 10%
      width 80%
      height 40px
      color $color-text
      line-height 40px
      text-align center
      z-index 40
    .bg-image
      position relative
      width 100%
      height 0
      padding-top 70%
      transform-origin top
      background-size cover
      .filter
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        background-color rgba(7, 17, 27, 0.4)
    .list
      position fixed
      top 0
      left 0
      bottom 0
      width 100%
      .song-list-wrapper
        padding-top 40px
        background-color $color-background
</style>
